<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>投票</title>
    <style>

     table {
         font-family: verdana,arial,sans-serif;
         font-size:11px;
         color:#333333;
         border-width: 0px;
         border-color: #666666;
         border-collapse: collapse;
         width: 100%;
     }
     table th {
         border-width: 1px;
         padding: 8px;
         border-style: solid;
         border-color: #666666;
         background-color: #dedede;
         text-align: center;
     }
     table td {
         border-width: 0px;
         padding: 8px;
         border-style: solid;
         border-color: #666666;
         background-color: #ffffff;
         text-align: center;
     }

    </style>
    <script src="/js/jquery.min.js"></script>
</head>
<body>
    
    <table>
        <tbody>
            <tr>
                <td colspan="2"><input type=“text” style="width: 90%;height: 80px; font-size: 40px;" class="name" placeholder="写个名字先？"></td>
            </tr>
            <tr>
                <td colspan="2" style="font-size: 100px;">可以实时修改投票</td>
            </tr>
            <tr style="height: 1200px;">
                <td class="left" style="background-color: red;"></td>
                <td class="right" style="background-color: blue;"></td>
            </tr>
        </tbody>
    </table>
</body>
<script>

    $(function () {

    //var guid = localStorage.vote_guid;

    //if (! guid) {

    //    localStorage.vote_guid = guid = Number(Math.random().toString().substr(3, 3) + Date.now()).toString(36);
    //}

    function getQueryVariable(variable, dft = 'default')
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return dft;
    }


    $('.left').on('click', function () {
 	var $this = $(this);
 	var guid = $('.name').val();

 	if (! guid) {
 	    alert('请先输入您的名字');
 	    return;
	}

        var ws = new WebSocket('ws://argue.yao-yang.cn:4321/' + getQueryVariable('rand'));
        ws.onmessage = function (event) {
            if (typeof event.data === 'string') {
                var vote_result = JSON.parse(event.data);
                if (vote_result.res) {
                    $this.css('width', '90%');
                    $('.right').css('width', '10%');
		} else {
 		    alert(vote_result.msg);
		}
                ws.close();
            }
        };
        ws.onopen = function (event) {
            ws.send(JSON.stringify({
                guid: guid,
                select: 'left',
            }));
        };
    });

    $('.right').on('click', function () {
 	var $this = $(this);
 	var guid = $('.name').val();

 	if (! guid) {
 	    alert('请先输入您的名字');
 	    return;
	}

        var ws = new WebSocket('ws://argue.yao-yang.cn:4321/' + getQueryVariable('rand'));
        ws.onmessage = function (event) {
            if (typeof event.data === 'string') {
                var vote_result = JSON.parse(event.data);
                if (vote_result.res) {
		    $this.css('width', '90%');
		    $('.left').css('width', '10%');
		} else {
 		    alert(vote_result.msg);
		}
                ws.close();
            }
        };
        ws.onopen = function (event) {
            ws.send(JSON.stringify({
                guid: guid,
                select: 'right',
            }));
        };
    });

    });

</script>
</html>
